<template>
    <div>
        <div class="nochance notoucher" v-if="contracts.length == 0">
            <div class="alert">目前未与该客户签订合同。</div>
        </div>
        <el-table border :data="contracts" v-else>
            <el-table-column prop="contractNum" label="合同名称" header-align="center" align="center"  > </el-table-column>
            <el-table-column prop="conState.name" label="合同状态" header-align="center" align="center"></el-table-column>
            <el-table-column prop="totalMoney" label="合同金额" width="150" header-align="center" align="center"> </el-table-column>
            <el-table-column  label="回款金额" header-align="center" align="center">
                <template slot-scope="s">
                    {{s.row.returnMoney}}
                </template>

            </el-table-column>
            <el-table-column  label="未回款金额" header-align="center" align="center">
                <template slot-scope="s">
                    {{s.row.totalMoney - s.row.returnMoney}}
                </template>
            </el-table-column>
            <el-table-column  label="成交时间" header-align="center" align="center">
                <template slot-scope="s">
                    {{s.row.signTime | format_date}}
                </template>
            </el-table-column>
            <el-table-column prop="owner.empName" label="促成人员" header-align="center" align="center"></el-table-column>
        </el-table>

        <!-- 分页
         <div class="block" style="margin-top:10px">
             <el-pagination background layout="total, prev, pager, next" :total="1000"></el-pagination>
         </div>-->
    </div>
</template>

<script>
    export default {
        name: "cViewContract",
        props:['customerData'],
        data:function () {
            return{
                contracts:[]//所有合同
            }
        },
        methods:{
            getHisContracts(customerId){
                    this.axios.get("api/customer/all_hisContracts",{params:{"customerId":customerId}})
                    .then(v => {
                            this.contracts = v.data
                }).catch()
            }
        },
        created() {
            this.getHisContracts(this.$store.state.vueCustomerView.customer.customerId);
        }
    }
</script>

<style scoped>
    .notoucher .alert{ border-radius: 3px; width: 100%;height: 100%;  color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;}
    .nochance .alert{
        border-radius: 3px; width: 97%;height: 100%; padding: 20px 10px 20px 20px;color: #a94442;
        background-color: #f2dede;
        line-height: 20px;
        border-color: #ebccd1;
    }
</style>